<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    a{
      color:red
    }
  </style>
</head>

<body>
  <div id="app">
    <div @click="fn">我是app</div>
    <parent class="a" style="color:red"></parent>
  </div>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script>

    let son = {
      template: `<div>我是son组件{{r.num}}{{aa}}</div>`,
      inject:['r','fn','aa'], // 接收从祖先上传递过来的属性
      created() {
        console.log(this.fn)
        console.log(this.$parent.$parent) // 获取父亲的父亲
      },
    }
    let parent = {
      template: `<div class="b" style="background:green">
                  <div >我是parent组件</div>
                  <son></son>
                </div>`,
      components: {
        son
      },
      data(){
        return{
          aa:800
        }
      },
      provide() {
        return {
          aa:this.aa
        }
      },
      // inject:['num']
    }

    let vm = new Vue({
      el: '#app',
      data: {
        r:{
          num:0
        },
        s:100
      },
      provide() {
        return {
          r: this.r,
          fn:this.fn,
          s:this.s
        }
      },
      methods:{
        fn(){
          console.log(12334);
          // this.r.num++;
        }
      },
      components: {
        parent
      }
    });

    // 提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。
    // 这样就可以实现隔代组件之间的参数传递
    // 利用provide传递的值都会放到_provided身上，可以输出this._provided进行查看
  </script>
</body>

</html>